/*
 desktop.css 1.3.3
 This file is part of OpenAero.

  OpenAero was originally designed by Ringo Massa and built upon ideas
  of Jose Luis Aresti, Michael Golan, Alan Cassidy and many others. 

  OpenAero is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  OpenAero is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with OpenAero.  If not, see <http://www.gnu.org/licenses/>.
*/

/* This file defines all the css styles for the desktop version */

body {
  overflow: hidden;
}
#topBlock {
  position: absolute;
  display: block;
  background: #fafafa;
  background: -webkit-linear-gradient(top, #ffffff, #f0f0f0);
  background: linear-gradient(top, #ffffff, #f0f0f0);
  border-bottom: 1px solid #888;
  -moz-box-shadow: 0 4px 5px -2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 5px -2px rgba(0,0,0,0.5);
  box-shadow: 0 4px 5px -2px rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  width: 100%;
/*  height: 49px;*/
  margin: 0;
  padding: 0 0 4px 0;
  z-index: 10;

}
.version {
  position: absolute;
  top:5px;
  right:10px;
  text-align:right;
}
#sequence_text {
  position: absolute;
  top: 0px;
  left: 2px;
  font-size: 16px;
  width: 98%;
  resize: none;
}
#main {
  position: absolute;
  top: 0px;
  bottom: 2px;
  padding: 50px 0 5px 0;
  width: 100%;
  overflow: hidden;
}
#leftBlock {
  float: left;
  overflow: auto;
  overflow-x: hidden;
  background: #f4f4f4;
  background: -webkit-linear-gradient(top, #f4f4f4, #e8e8e8);
  background: linear-gradient(top, #f4f4f4, #e8e8e8);
  -moz-box-shadow: 2px 0 2px -2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 0 2px -2px rgba(0,0,0,0.5);
  box-shadow: 2px 0 2px -2px rgba(0,0,0,0.5);
  width: 276px;
  height: 99%;
  padding: 4px;
  z-index: 1;
}
#sequenceInfo {
  background: -webkit-linear-gradient(top, #f4f4f4, #e0e0ff);
  background: linear-gradient(top, #f4f4f4, #e0e0ff);
}
#figureInfo {
  background: -webkit-linear-gradient(top, #f4f4f4, #e0e0ff);
  background: linear-gradient(top, #f4f4f4, #e0e0ff);
}
.tabSelector {
  width: 600px;
}
.tabSelector li {
  width: 132px;
}
#svgContainer {
  position: absolute;
  top: 50px;
  right: 0px;
  bottom: 0;
  left: 286px;
  padding: 10px 10px 20px 10px;
  /*height: 95%;*/
  background-color:#ffffff;
  overflow: auto;
}
#figureSelector {
  position: absolute;
  overflow: hidden;
  background: #f4f4f4;
  background: -webkit-linear-gradient(top, #f4f4f4, #e8e8e8);
  background: linear-gradient(top, #f4f4f4, #e8e8e8);
  top: 50px;
  right: -340px;
  -moz-transition: 0.2s right;
  -o-transition: 0.2s right;
  -webkit-transition: 0.2s right;
  transition: 0.2s right;
  width: 340px;
  height: 95%;
  padding: 0px;
  z-index: 2;
}
#figureSelector.active {
  right:0;
}

/* button tooltips */
.tooltip {outline:none; }
.tooltip strong {line-height:30px;}
.tooltip:hover {text-decoration:none;} 
.tooltip div {
  position: absolute;
  font-size: 1.2em;
  z-index:10;
  display:none;
  padding:4px;
  margin-top:-72px;
  margin-left:-150px;
  width:144px;
  color:#003;
  border:1px solid #e0b070;
  background:#fff0e0;
}
.tooltip:hover div {
  display:block;
}
.tooltip div {
  border-radius:8px 8px 0 8px;
  -moz-border-radius: 8px 8px 0 8px;
  -webkit-border-radius: 8px 8px 0 8px;
  -moz-box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
  background: -webkit-linear-gradient(top, rgba(255,250,240,1) 0%,rgba(255,246,220,1) 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, rgba(255,250,240,1) 0%,rgba(255,246,220,1) 100%); /* W3C */
}
.ttRight div {
  margin-left:20px;
  border-radius:8px 8px 8px 0;
  -moz-border-radius: 8px 8px 8px 0;
  -webkit-border-radius: 8px 8px 8px 0;
}
  
/* buttons */
.undoRedoButton {
  float: left;
  width: 20px;
  height: 20px;
  margin: 1px;
}
.smallButton {
  width: 20px;
  height: 20px;
  margin: 1px;
}
#undo {
  background-image: url('buttons/smallUndo.png');
}
#redo {
  background-image: url('buttons/smallRedo.png');
}
#figEntryButton {
  background-image: url('buttons/smallFigStartUp.png');
}
#figExitButton {
  background-image: url('buttons/smallFigEndUp.png');
}
#figEntryButton.inverted {
  background-image: url('buttons/smallFigStartInv.png');
}
#figExitButton.inverted {
  background-image: url('buttons/smallFigEndInv.png');
}
#figEntryButton.smallButton {
  margin-right: 10px;
}
#figExitButton.smallButton {
  margin-left: 10px;
}
#comments {
  width: 246px;
  height: 1.5em;
}
